<?php
/**
 * Created by PhpStorm.
 * User: luanalex
 * Date: 2017/9/18
 * Time: 11:31
 */

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<button onclick="addAction()">onclick</button>
<div id="example"></div>
<script type="text/babel">
    var i = 0;
    function addAction() {
        var arr = [
                <h1>菜鸟教程</h1>,
            <h2>学的不仅是技术，更是梦想！</h2>,
    ];
        ReactDOM.render(
        <div>{arr}</div>,
            document.getElementById('example')
    );
//        example
//        var myStyle = {
//            fontSize: 100,
//            color: '#FF0000'
//        };
//        ReactDOM.render(
//        <h1 style = {myStyle}>菜鸟教程</h1>,
//            document.getElementById('example')
//        );
//        example
//        i = i + 1;
//        ReactDOM.render(
//        <div>
//        <h1>{i == 1 ? 'True!' : 'False'}</h1>
//        </div>
//            ,
//            document.getElementById('example')
//        );
//        example 1
//        ReactDOM.render(
//        <div><h1>this is  addaction</h1> <h2>Hello, world! {i}</h2></div>,
//            document.getElementById('example')

    }
    ReactDOM.render(
    <div><h1>Hello, world!</h1> <h2>Hello, world!</h2></div>,
        document.getElementById('example')
    );
</script>
</body>
</html>
